<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>132</div>
		<div class="d"></div>
		<p id="p1">测试元素</p>
		<ul class="nav">
			<li>我的首页</li>
			<li>产品介绍</li>
			<li>联系方式</li>
		</ul>
		<ul class="nav1">
			<li>首页</li>
			<li>介绍</li>
			<li>方式</li>
		</ul>
		<script>
			// querySelector获取第一个元素
			// const div=document.querySelector('div');
			// console.log(div);s
			const div2=document.querySelector('.d');
			div2.innerHTML="哈哈哈加油啊";
			const p1=document.querySelector('#p1');
			console.log(p1);
			p1.style.color='#ffa';
			// ul
			const nav=document.querySelector('.nav');
			nav.style.backgroundcolor="red";
			console.log(nav);
			// 获取第一个li1
			const li1=document.querySelector('ul>li');
			li1.style.color="red";
			// // 获取第一个li2
			const li2=document.querySelector('ul li:nth-child(2)');
			li2.style.color="green";
			// // 获取第一个li3
			const li3=document.querySelector('ul li:nth-child(3)');
			li3.style.color="blue";
			 // querSelectorAll选取全部元素
			 // 选择下面的所有li元素
			 const lis=document.querySelectorAll('li');
			 console.log(lis);
			 for(let i=0;i<lis.length;i++){
				 console.log(lis[i]);
			 }
			 // radom=Math.floor(Math.random()*lis.length);
			 
			 // lis.splice()
			
		</script>
	</body>
</html>